<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
	<style>
		a {
			text-decoration: none;
		}
		a:hover {
			text-decoration: none;
		}
		.img {
			display: flex;
			flex-wrap: wrap;
		}
		.img img{
			width: 210px;
			height: 210px;
			object-fit: cover;
			/* margin: 15px; */
		}
		.form-control {
			height: auto;
		}
		#cboxClose{
			text-indent: 0;
			font-size: 50px;
			font-weight: bold;
			margin-top: 10px;
			color: red;
		}
		.ace-thumbnails li {
			margin: 10px;
		}
		.div-audio {
			margin: 30px 0;
		}
		audio {
			margin-right: 10px;
		}
		.audio {
			margin-bottom: 20px;
			font-size: 18px;
		}
		.delete-audio {
			margin-left: 10px;
		}
		.btn-display-outer {
			width: 210px;
			height: 210px;
			position:absolute;
			top: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.btn-display {
			width:100px !important;
			height:100px !important;
			/* left:25%;
			top:25%;
			position:absolute; */
		}
    </style>
	<div class="page-header">
		<h1><?=isset($newsInfo) ? '编辑班级动态' : '发布班级动态'?></h1>
	</div>
	<!-- <div class="video-modal" style="position:fixed;top:0;width:100%;height:100%;z-index:1000;background-color:gray;display:flex;justify-content: center;
		align-items: center;">
		
		<video src="https://resource.rongmixiao.com/2020/04/02/1d4f05044f95d7ca23a6b12daa8a13ef.mp4" controls="controls" autoplay="autoplay"
		style="max-height: 80%;"></video>
	</div> -->


	<div class="col-xs-12">
		<form class="form-horizontal" id="classes-form">
			<input type="hidden" name="id" value="<?=isset($newsInfo['id']) ? $newsInfo['id'] : 0 ?>" />
			<input type="hidden" name="video_link" value="<?= isset($newsInfo['video_link']) ? $newsInfo['video_link'] : '' ?>" />
			<input type="hidden" name="video_poster" value="<?= isset($newsInfo['video_poster']) ? $newsInfo['video_poster'] : '' ?>" />
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">动态标题：</label>
				<div class="col-sm-6">
					<input class="form-control" type="text" name="news_title" value="<?= isset($newsInfo['news_title']) ? $newsInfo['news_title'] : '' ?>" placeholder="请填写动态标题"/>
				</div>
			</div>
			<!-- <div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">定时发布：</label>
				<div class="col-sm-6">
					<select class="form-control" name="is_cron">
						<option value="0" <?= isset($newsInfo['is_cron']) && $newsInfo['is_cron'] ? '' : 'selected' ?>>否</option>
						<option value="1" <?= isset($newsInfo['is_cron']) && $newsInfo['is_cron'] ? 'selected' : '' ?>>是</option>
					</select>
				</div>
			</div> -->
			<!-- <div class="form-group <?= isset($newsInfo['is_cron']) && $newsInfo['is_cron'] ? '' : 'hide' ?>" id="cron-time-div">
				<label class="col-sm-3 control-label no-padding-right">定时发布时间：</label>
				<div class="col-sm-6">
					<input class="form-control" id="datetime-picker" type="text" name="crontime" value="<?= isset($newsInfo['crontime']) ? $newsInfo['crontime'] : date('Y-m-d H:i') ?>" placeholder="请选择定时发布时间"/>
				</div>
			</div> -->
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">发布班级：</label>
				<div class="col-sm-6">
					<?php foreach($gradeArray as $key => $grade): ?>
						<div class="well well-sm">
							<a class="blue select-grade" href="javascript:;" title="全选年级"><?=$key?> <span style="color: #999;margin-left: 5px">(点击选中全部班级)</span></a>
							<div class="mt5">
							<?php foreach($grade['class'] as $class): ?>
								<label class="inline checkbox-item mr20">
									<input class="ace" type="checkbox" name="news_class" value="<?=$class['id']?>" />
									<span class="lbl"> <?=$class['class_name']?></span>
								</label>
							<?php endforeach; ?>
							</div>
						</div>
					<?php endforeach; ?>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">动态内容：</label>
				<div class="col-sm-6">
					<textarea class="pd0" id="content" name="news_content" style="height: 400px;width: 100%"><?= isset($newsInfo['news_content']) ? urldecode($newsInfo['news_content']) : '' ?></textarea>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">上传图片：</label>
				<div class="col-sm-6">
					<div class="form-control">
						<div class="img">
							<ul class="ace-thumbnails ace-thumbnails-img clearfix">
								<li style="height: 210px;">
									<a href="javascript:;" id="upload-img">
										<img class="fit-cover" src="<?=$staticAdminUrl?>assets/images/upload.png" />
									</a>
								</li>
								<?php if(isset($newsInfo['imgArr'])): ?>
									<?php foreach($newsInfo['imgArr'] as $image): ?>
										<li>
											<a href="<?=$image?>" data-rel="colorbox" class="cboxElement">
												<img class="img-material" src="<?=$image?>" width="150" height="150" class="fit-cover">
												<div class="text">
													<div class="inner"></div>
												</div>
											</a>
											<div class="tools tools-bottom">
												<a href="javascript:;" class="red image-delete">
													<i class="ace-icon fa fa-trash"></i>
												</a>
											</div>
										</li>
									<?php endforeach; ?>
								<?php endif ?>		
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">视频文件：</label>
				<div class="col-sm-6">
					<div class="form-control">
						<div class="img">
							<ul class="ace-thumbnails ace-thumbnails-video clearfix">
								<li style="height: 210px;">
									<a href="javascript:;" id="upload-video" style="">
										<img class="fit-cover" src="<?=$staticAdminUrl?>assets/images/upload.png" />
									</a>
								</li>
								<?php if(isset($newsInfo['videoArr'])): ?>
									<?php foreach($newsInfo['videoArr'] as $video): ?>
										<li class="li-video">
											<a class="a-video" data-saveas="<?= $video['link'] ?>" style="position:relative;background: rgba(0,0,0,0.4)"
											data-link="<?= isset($video['old_link']) ? $video['old_link'] : $video['link'] ?>" href="<?= $video['href'] ?>" target="_blank" id="" style="height: 240px;">
												<img style="opacity: 0.4" class="cover" src="<?=$video['cover']?>"  class="fit-cover">
												<div class="text">
													<div class="inner"></div>
												</div>
												<div class="btn-display-outer">
													<img class="btn-display" src="<?=$staticAdminUrl?>assets/images/video_display_btn.png">
												</div>
												
											</a>	
											<div class="tools tools-bottom">
												<a href="javascript:;" class="red video-delete">
													<i class="ace-icon fa fa-trash"></i>
												</a>
											</div>
										</li>
									<?php endforeach; ?>
								<?php endif ?>		
							</ul>
						</div>
					</div>
				</div>
			</div>
			<!-- <div class="form-group div-audio">
				<label class="col-sm-3 control-label no-padding-right">音频文件：</label>
				<div class="col-sm-6 upload-div">
					<div id="outer-audio">
						<?php if(isset($newsInfo['audioArr']) && $newsInfo['audioArr']): ?>
							<?php foreach($newsInfo['audioArr'] as $audio): ?>
								<div class="audio" data-link="<?= $audio['link'] ?>" data-name="<?= $audio['name'] ?>">
									<audio src="<?= $audio['link'] ?>" controls="controls"></audio>
									<span><?= $audio['name'] ?></span>
									<i class="delete-audio fa fa-trash bigger-110 red"></i>
								</div>
							<?php endforeach ?>	
						<?php endif; ?>
					</div>
					<div href="javascript:;" id="upload-audio">
						<img class="fit-cover" src="<?=$staticAdminUrl?>assets/images/upload.png" width="160" height="160" />
					</div>
				</div>
			</div> -->
			<div class="clearfix">
				<div class="col-md-offset-3 col-md-9">
					<a class="btn btn-info submit">
						<i class="ace-icon fa fa-check"></i> 提交
					</a>
				</div>
			</div>
		</form>
	</div>
<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<!-- 百度编辑器 -->
<script src="<?=$staticAdminUrl?>assets/ueditor/ueditor.config.js"></script>
<script src="<?=$staticAdminUrl?>assets/ueditor/ueditor.all.js"></script>
<script type="text/javascript">
	$(function(){
		<?php if(isset($newsInfo) && !empty($newsInfo)): ?>
			// 选中接收的班级
			var classArray = "<?=$newsInfo['class_id']?>".split(",");
			for(var i in classArray) {
				var newsClass = $("[name=news_class][value="+ classArray[i] +"]")[0];
				if(newsClass) {
					newsClass.checked = true;
				}
			}
		<?php endif; ?>

		// 点击年级，全选下级班级
		var cancel = false;
		$(".select-grade").click(function(){
			// 第一选择，第二次取消选择
			if(cancel) {
				// 取消选择
				$(this).parent().find("[name=news_class]").each(function(){
					$(this)[0].checked = false;
				});
				cancel = ! cancel;
			} else {
				// 选择
				$(this).parent().find("[name=news_class]").each(function(){
					$(this)[0].checked = true;
				});
				cancel = ! cancel;
			}
		})

		// 初始化编辑器
		var ue = UE.getEditor('content');
		// // 提交表单
		// var form = $("#classes-form");
		// var submitUrl = "<?=admin_url('contents/save_news_action')?>";
		// form_submit(form, submitUrl, function(res) {
		// 	tips_alert(res.msg, res.success, function(){
		// 		if(res.success) {
		// 			window.location.href = "<?=admin_url('contents/news')?>";
		// 		}
		// 	});
		// });
		$(".submit").click(function() {
			var id = $("[name=id]").val();
			var newsTitle = $("[name=news_title]").val();
			var newsClassArr = [];
			$("[name=news_class]").each(function() {
				if($(this).prop("checked")) {
					newsClassArr.push($(this).val());
				}
			});
			var newsClass = newsClassArr.join(',');
			var newsContent = $("[name=news_content]").val();
			var isCron = $("[name=is_cron]").val();
			var cronTime = $("[name=crontime]").val();
			var imgArr = new Array();
			$(".ace-thumbnails .img-material").each(function() {
				if($(this).css('display') != 'none') {
					imgArr.push($(this).attr("src"));
				}
			});
			// 获取视频文件
			var videoArr = new Array();
			$(".ace-thumbnails .li-video").each(function() {
				if($(this).css('display') != 'none') {
					videoArr.push({
						'cover': $(this).find(".cover").attr("src"),
						'link': $(this).find(".a-video").data("saveas"),
						'old_link': $(this).find(".a-video").data("link")
					});
				}
			});
			// console.log($(".ace-thumbnails .li-video").find(".a-video").length);
			// console.log(videoArr);return;

			// 获取音频文件
			var audioArr = [];
			$(".audio").each(function() {
				if($(this).css('display') != 'none') {
					var name = $(this).data('name');
					var link = $(this).data('link');
					audioArr.push({
						'name': name,
						'link': link
					});
				}
			});
			// console.log(audioArr);return;
			var url = "<?=admin_url('contents/save_news_action')?>";
			var data = {
				"id": id,
				"news_title": newsTitle,
				"news_class": newsClass,
				"news_content": newsContent,
				"material": imgArr,
				"video_arr": videoArr,
				"audio_arr": audioArr,
				'is_cron': isCron,
				'crontime': cronTime
			};
			// console.log(1);return;
			ajax_post(url, data, function() {
				window.location.href = "<?=admin_url('contents/news')?>";
			});
		});
		// 上传图片对象
		$("#upload-img").uploader({
			"multiple": true, // 多图上传
			"server":  '<?=UP_FORM_URL?>',
			"authorization": "<?=$signature?>",
			"policy": "<?=$policy?>",
			"callback": function(response) {
				var imgFile = "<?=UP_URL?>" + response.url;
				$(".ace-thumbnails-img").append('\
					<li>\
						<a href="' + imgFile + '" data-rel="colorbox" class="cboxElement">\
							<img class="img-material" src="' + imgFile + '" width="150" height="150" class="fit-cover">\
							<div class="text">\
								<div class="inner"></div>\
							</div>\
						</a>\
						<div class="tools tools-bottom">\
							<a href="javascript:;" class="red image-delete">\
								<i class="ace-icon fa fa-trash"></i>\
							</a>\
						</div>\
					</li>\
				');
				$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
			}
		});
		// 图片轮播
		var colorbox_params = {
			rel: 'colorbox',
			reposition:true,
			scalePhotos:true,
			scrolling:false,
			previous:'<i class="ace-icon fa fa-arrow-left"></i>',
			next:'<i class="ace-icon fa fa-arrow-right"></i>',
			close:'&times;',
			current:'',
			maxWidth:'100%',
			maxHeight:'100%',
			onOpen:function(){
				$overflow = document.body.style.overflow;
				document.body.style.overflow = 'hidden';
			},
			onClosed:function(){
				document.body.style.overflow = $overflow;
			},
			onComplete:function(){
				$.colorbox.resize();
			}
		};
		$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		// 删除图片
		$("body").on("click", ".image-delete", function(e){
			var that = $(this);
			layer.confirm('确定删除该图片吗？', function(index){
				that.parents("li").find(".img-material").hide();
				layer.close(index);
			});
		});
		// 视频上传
		var i = 1;
		$("#upload-video").uploader({
			"server":  '<?=UP_FORM_URL?>',
			"accept": "video",
			"callback": function(response) {
				layer.load(1);
				// console.log(response);
				var fileLink =  response.url;
				var size = response.size;
				// 视频转码压缩
				// i ++;
				// // var str = '<?= date("Y") . "/" . date("m") . "/" . date("d"). "/".  uniqid() . rand(1000,10000) ?>' + i + ".mp4";

				// 原视频如果为mp4且小于200m，不需转码
				// if(fileLink.indexOf(".mp4") != -1 &&  size < 1024 * 1024 * 200) {
				if(fileLink.indexOf(".mp4") != -1) {
					var saveAsLink = fileLink;
					var isCompress = false;
				} else {
					var arr = fileLink.split('.');
					var suffix = arr.pop();
					var temp = fileLink.replace("." + suffix, "");
					var saveAsLink = temp + '_thumb' + '.mp4';
					var isCompress = true;
				}

				// 视频截取封面
				var url = '<?= wx_url("util/video_snapshot") ?>';
				var params = { video_link: fileLink};
				ajax_get(url, params, function(res) {
					var videoCover = res.data.video_cover;
					// 加载视频文件
					$(".ace-thumbnails-video").append('\
						<li class="li-video">\
							<a class="a-video" data-saveas="' + saveAsLink + '" style="position:relative;background: rgba(0,0,0,0.4)" data-link="' + fileLink + '" href="' + fileLink + '" target="_blank" style="height: 240px;">\
								<img style="opacity: 0.4" class="cover" src="' + videoCover + '"  class="fit-cover">\
								<div class="text">\
									<div class="inner"></div>\
								</div>\
								<img class="btn-display" src="<?=$staticAdminUrl?>assets/images/video_display_btn.png" style="width:100px;height:100px;left:25%;top:25%;position:absolute;">\
							</a>\
							<div class="tools tools-bottom">\
								<a href="javascript:;" class="red video-delete">\
									<i class="ace-icon fa fa-trash"></i>\
								</a>\
							</div>\
						</li>\
					');
					layer.closeAll('loading');
					if(isCompress) {
						// 视频转码
						var url = '<?= wx_url("util/video_compress") ?>';
						var params = { source: fileLink, save_as_link: saveAsLink };
						ajax_get(url, params);
					}
				});
			}
		});
		// 删除视频
		$("body").on("click", ".video-delete", function(e){
			var that = $(this);
			layer.confirm('确定删除该视频吗？', function(index){
				that.parents("li").hide();
				layer.close(index);
			});
		});
		// 动态加载视频封面
		setInterval(function(){
			$("video").each(function(){
				var poster = $(this).attr("poster");
				var videoFile = $(this).attr("src");
			})
		}, 1000)

		// 上传音频
		$("#upload-audio").uploader({
			"server":  '<?=UP_FORM_URL?>',
			"authorization": "<?=$signature?>",
			"policy": "<?=$policy?>",
			"accept": "<?= SOURCE_FORMAT_AUDIO ?>",
			"callback": function(response) {
				// 添加附件
				var fileName = decodeURIComponent(response.name);
				var fileLink = upyunUrl + response.url;
				$("#outer-audio").append('\
					<div class="audio" data-link="' + fileLink + '" data-name="' + fileName + '" >\
						<audio src="' + fileLink + '" controls="controls"></audio>\
						<span>' + fileName + '</span>\
						<i class="delete-audio fa fa-trash bigger-110 red"></i>\
					</div>');
			}
		});
		$("body").on("click", ".delete-audio", function() {
			var that = $(this);
			var name = that.parents(".audio").data('name');
			layer.confirm('确定删除:' + name + '？', function(index){
				that.parents(".audio").hide();
				layer.close(index);
			});
		});
		// 紧急程度切换
		$("[name=is_cron]").change(function(){
			if($(this).val() == 1) $('#cron-time-div').removeClass("hide");
			else $('#cron-time-div').addClass("hide");
			$("#datetime-picker").val("<?= date('Y-m-d H:i'); ?>")
		});
		// 日期时间选择器
		$('#datetime-picker').datetimepicker({
			format: 'YYYY-MM-DD HH:mm',
			icons: {
				time: 'fa fa-clock-o',
				date: 'fa fa-calendar',
				up: 'fa fa-chevron-up',
				down: 'fa fa-chevron-down',
				previous: 'fa fa-chevron-left',
				next: 'fa fa-chevron-right',
				today: 'fa fa-arrows ',
				clear: 'fa fa-trash',
				close: 'fa fa-times'
			}
		}).next().on(ace.click_event, function(){
			$(this).prev().focus();
		});
	})
</script>